<template>
	<view class='exchange'>
		<u-toast ref="uToast" />
		<map class="map" id="map" :longitude="longitude" :latitude="latitude" scale="11" :markers="markers"></map>

		<u-row gutter="0" class="map-search-box">
			<u-col span="10">
				<view class="search-input-box">
					<view class="select-city" @click="selectCity">{{city}}
						<u-icon style="margin-left: 5px;" name="arrow-down-fill" color="#ababab" size="10"></u-icon>
					</view>
					<u-input class="search-input" v-model="search" type="text" />
					<view class="search-btn" @click="list">
						<u-icon name="search" color="#ababab" size="40"></u-icon>
					</view>

				</view>
			</u-col>
			<u-col span="2" text-align="right">
				<view @click="list" class="list"></view>
			</u-col>
		</u-row>
		<u-button class="zhizhengzhaozhan" type="primary" @click="smart"><img src="../../static/img/exchange_icon_zhaozhan.png"
			 style='margin-right: 5px;width: 14px;height: 19px;' alt=""> 智能找站</u-button>
		<view class="shezhi">
			<!-- <view class="help" style=""></view> -->
			<view class="set" @click="set"></view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import amap from "@/js_sdk/amap-wx.js";
	let _this;
	export default {
		data() {
			return {
				search: '',
				city: '温州市',
				amapPlugin: null,
				key: 'fcb46dd4216f24139d9bb8d9a0f9b158',
				markers: [],
				title: 'map',
				latitude: 27.994018,
				longitude: 120.699274,
				textData: [],
				mapContBotm: '',
				mapTxtHeight: '',

			}
		},
		created() {
			_this = this;
		},
		computed: mapState(['hasLogin', 'userName', 'token']),
		onShow() {
			this.city = uni.getStorageSync('city');
			if (this.city == '') this.city = '温州市';
			this.getStation();
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					console.log(res);
					_this.longitude = res.longitude;
					_this.latitude = res.latitude;
				}
			});
		},
		methods: {
			set() {
				uni.navigateTo({
					url: './set'
				});
			},
			selectCity() {
				uni.navigateTo({
					url: './city?city=' + this.city
				});
			},
			list() {
				uni.navigateTo({
					url: './list?city=' + this.city + '&latitude=' + _this.latitude + '&longitude=' + _this.longitude + '&search=' +
						_this.search
				});
			},
			smart() {
				uni.navigateTo({
					url: './smart?city=' + this.city + '&latitude=' + _this.latitude + '&longitude=' + _this.longitude
				});
			},
			getStation() {
				uni.request({
					url: this.$store.state.ip + 'station/station/findPage', //仅为示例，并非真实接口地址。
					data: {
						"limit": "10000",
						"page": "1"
					},
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							var l = res.data.data.list.length;
							var a = res.data.data.list;
							var m = [];
							for (var i = 0; i < l; i++) {
								m.push({
									latitude: a[i].latitude,
									longitude: a[i].longtitude,
									iconPath: ''
								})
							}
							_this.markers = m;
							console.log(_this.markers);
						} else if (res.data.code == '040081') {

							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})

							console.log(res);
						}else{
							_this.$refs.uToast.show({
								title: res.data.msg,
								duration: 2000,
								position: 'bottom',
							})
							
						}


					},
					fail: (res) => {
						console.log(res);
					}
				});
			}
		},
		onLoad() {
			var that = this;
			this.amapPlugin = new amap.AMapWX({ //初始化
				key: this.key
			});

			this.amapPlugin.getRegeo({ //我的位置
				success: function(data) {
					that.latitude = data[0].latitude;
					that.longitude = data[0].longitude;

				}
			});




		}
	}
</script>

<style>
	.exchange {
		width: 100%;
		height: 100%;
		overflow: auto;
	}

	.map {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.map-search-box {
		position: absolute;
		top: 20px;
		height: 50px;
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.select-city {
		position: absolute;
		top: 0;
	}

	.list {
		float: right;
		width: 52px;
		height: 52px;
		background: url('../../static/img/btn_list_n.png');
	}

	.list:active {
		border: none;
		background: url('../../static/img/btn_list_s.png');
	}

	.search-input-box {
		border-radius: 50px;
		height: 48px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}

	.select-city {
		height: 48px;
		line-height: 52px;
		margin-left: 15px;
		font-size: 14px;
		float: left;
		width: 70px;
	}

	.search-input {
		float: left;
		margin-left: 90px;
		margin-top: 7px;
		width: 140px;
	}

	.search-btn {
		float: right;
		padding: 13px 15px;
	}

	.zhineng {
		position: absolute;
		bottom: 15px;
		width: 100%;
		text-align: center;

	}

	.zhizhengzhaozhan {
		position: absolute;
		bottom: 15px;
		left: 50%;
		margin-left: -75px;
		/* background-color: #ff6816 !important; */
		border: none;
		width: 150px;
		font-size: 16px;
		height: 45px;
		border-radius: 30px !important;
	}

	/* .zhizhengzhaozhan:active {
		background-color: #ff6816 !important;
		opacity: 0.8;
	} */

	.shezhi {
		position: absolute;
		bottom: 10px;
		right: 12px;

	}

	.help {
		height: 52px;
		width: 52px;
		background: url('../../static/img/btn_help_n.png');
	}

	.help:active {
		border: none;
		background: url('../../static/img/btn_help_s.png');
	}

	.set {
		height: 52px;
		width: 52px;
		background: url('../../static/img/btn_set_n.png');
	}

	.set:active {
		border: none;
		background: url('../../static/img/btn_set_s.png');
	}
</style>
